<template>
  <div>
    <el-form inline>
      <template v-for="(item, index) in searchProps" :key="index">
        <el-form-item :label="item.label" style="margin-right: var(--margin-default); margin-bottom: 0">
          <!--<el-input style="width: 200px" v-model="searchParam.keyword" placeholder="请输入内容" clearable />-->
          <component :is="`el-${item.search}`">
            <template v-if="item.search === 'select'">
              <component
                :is="`el-option`"
                v-for="col in item.enum"
                :key="col"
                :label="col[item.fieldNames.label]"
                :value="col[item.fieldNames.value]"
              ></component>
            </template>
          </component>
        </el-form-item>
      </template>
      <el-dropdown trigger="click" placement="bottom">
        <el-button :icon="Filter" circle />
        <template #dropdown>
          <div style="padding: 20px 10px">
            <!--<el-form-item
                label-width="100"
                style="margin-bottom: var(&#45;&#45;margin-default); margin-right: var(&#45;&#45;margin-default)"
                label="title"
              >
                <el-input style="width: 200px" v-model="searchParam.title" placeholder="请输入内容" clearable />
              </el-form-item>
              <el-form-item
                style="margin-bottom: var(&#45;&#45;margin-default); margin-right: var(&#45;&#45;margin-default)"
                label="供应商链接"
                label-width="100"
              >
                <el-select style="width: 200px" v-model="searchParam.title" placeholder="请输入内容" clearable />
              </el-form-item>-->
          </div>
        </template>
      </el-dropdown>
    </el-form>
    <el-button :icon="Search" circle />
    <!--<el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />-->
  </div>
</template>
<script setup lang="ts">
import { Filter, Refresh, Search } from '@element-plus/icons-vue'

interface Props {
  searchProps: any[]
  searchParam?: { [key: string]: any } // 搜索参数
}

const props = withDefaults(defineProps<Props>(), {
  searchProps: () => [],
  searchParam: () => ({})
})
</script>

<style scoped lang="scss"></style>
